<template>
  <div class="sellerHubHome">
    <div class="sellerHubHome-box"
         v-if="titleIndex !== 0">
      <div class="title">
        <div>
          <span @click="cutTitle(1)"
                v-if="accessories"
                :class="{'active': titleIndex === 1}">配件</span>
          <span @click="cutTitle(2)"
                v-if="finance"
                :class="{'active': titleIndex === 2}">财务</span>
        </div>
      </div>
      <div class="backlog">
        <div class="headers"><span>待办事项</span></div>
        <div class="backlog-box"
             v-if="titleIndex === 2">
          <div>
            <span class="backlog-box-left">
              <img src="../../../assets/image/sellerHub/xuqiu.png"
                   alt="">
            </span>
            <div class="backlog-box-right">
              <p>待开票</p>
              <span> <i>18</i>个 </span>
            </div>
          </div>
          <div>
            <span class="backlog-box-left">
              <img src="../../../assets/image/sellerHub/peihuo.png"
                   alt="">
            </span>
            <div class="backlog-box-right">
              <p>售后退款</p>
              <span> <i>16</i>个 </span>
            </div>
          </div>
        </div>
        <div class="backlog-box"
             v-if="titleIndex === 1">
          <div>
            <span class="backlog-box-left">
              <img src="../../../assets/image/sellerHub/statistics7.png"
                   alt="">
            </span>
            <div class="backlog-box-right">
              <p>找件需求</p>
              <span> <i>18</i>个 </span>
            </div>
          </div>
          <div>
            <span class="backlog-box-left"
                  style="background:#fff4e6">
              <img src="../../../assets/image/sellerHub/statistics5.png"
                   alt="">
            </span>
            <div class="backlog-box-right">
              <p>待配货</p>
              <span> <i>16</i>个 </span>
            </div>
          </div>
          <div>
            <span class="backlog-box-left"
                  style="background:#fff4e6">
              <img src="../../../assets/image/sellerHub/statistics1.png"
                   alt="">
            </span>
            <div class="backlog-box-right">
              <p>待提货</p>
              <span> <i>16</i>个 </span>
            </div>
          </div>
          <div>
            <span class="backlog-box-left"
                  style="background:#fef7f7">
              <img src="../../../assets/image/sellerHub/statistics3.png"
                   alt="">
            </span>
            <div class="backlog-box-right">
              <p>超时订单</p>
              <span> <i>16</i>个 </span>
            </div>
          </div>
          <div>
            <span class="backlog-box-left"
                  style="background:#F5FBF4">
              <img src="../../../assets/image/sellerHub/statistics6.png"
                   alt="">
            </span>
            <div class="backlog-box-right">
              <p>售后</p>
              <span> <i>16</i>个 </span>
            </div>
          </div>
          <div>
            <span class="backlog-box-left"
                  style="background:#fef7f7">
              <img src="../../../assets/image/sellerHub/statistics4.png"
                   alt="">
            </span>
            <div class="backlog-box-right">
              <p>库存预警</p>
              <span> <i>16</i>个 </span>
            </div>
          </div>
        </div>
      </div>
      <div class="bill"
           v-if="titleIndex === 2">
        <div class="headers">
          <span>账单管理</span>
          <div class="headers-right">
            <a-date-picker format="YYYY"
                           mode="year"
                           placeholder="请选择年份"
                           :value="year"
                           :open="open"
                           @openChange="openChange"
                           @panelChange="panelChange" />
          </div>
        </div>
        <div class="bill-list">
          <div class="bill-list-float"
               @click="moveLeft(true)"
               v-if="moveClickStatus !== 1">
            <a-icon type="right" />
          </div>
          <div class="bill-list-float-right"
               @click="moveLeft(false)"
               v-if="moveClickStatus !==2">
            <a-icon type="left" />
          </div>
          <div class="bill-list-box">
            <div class="bill-ul"
                 :style="{marginLeft: - Left + 'px'}">
              <div class="bill-li"
                   v-for="(item , index) in monthBillArr"
                   :key="index">
                <div class="bill-li-title">
                  <span> {{index + 1}}月份账单</span>
                  <span>查看</span>
                  <p>¥345,000.00</p>
                  <div class="circle-left"></div>
                  <div class="circle-right"></div>
                </div>
                <div class="bill-li-money">
                  <p>日期 <span>2021-03-01</span></p>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
      <div class="statistics">
        <div class="headers">
          <span>统计数据看板</span>
          <div class="headers-right">
            <i :class="{'active': statisticsStatus === 1}"
               @click="clickStatistics(1)">今</i>
            <i :class="{'active': statisticsStatus === 2}"
               @click="clickStatistics(2)">过去7天</i>
            <i :class="{'active': statisticsStatus === 3}"
               @click="clickStatistics(3)">过去30天</i>
            <a-month-picker placeholder="请选择月份"
                            :locale="locale"
                            @change="onChange" />

          </div>
        </div>
        <div class="statistics-box"
             v-if="titleIndex === 2">
          <div>
            <span class="statistics-box-left">
              <img src="../../../assets/image/sellerHub/moneys.png"
                   alt="">
            </span>
            <div class="statistics-box-right">
              <p>实际收款金额（元）</p>
              <h3>¥ 8888.00</h3>
              <span>共<i>18</i>笔订单 </span>
            </div>
          </div>
          <div>
            <span class="statistics-box-left">
              <img src="../../../assets/image/sellerHub/moneys.png"
                   alt="">
            </span>
            <div class="statistics-box-right">
              <p>退款金额（元）</p>
              <h3>¥ 8888.00</h3>
              <span>共<i>18</i>笔订单 </span>
            </div>
          </div>
        </div>

        <div class="statistics-box statistics-box1"
             v-if="titleIndex === 1">
          <div>
            <span class="statistics-box-left">
              <img src="../../../assets/image/sellerHub/moneys.png"
                   alt="">
            </span>
            <div class="statistics-box-right">
              <p>成交商品金额（元）</p>
              <h3>¥ 8888.00</h3>
            </div>
          </div>
          <div>
            <span class="statistics-box-left"
                  style="background:#F2F8FF">
              <img src="../../../assets/image/sellerHub/fl.png"
                   alt="">
            </span>
            <div class="statistics-box-right">
              <p>成交商品种类（类）</p>
              <h3>10</h3>
            </div>
          </div>
          <div>
            <span class="statistics-box-left"
                  style="background:#ECF9F9">
              <img src="../../../assets/image/sellerHub/numbers.png"
                   alt="">
            </span>
            <div class="statistics-box-right">
              <p>成交商品数量（个）</p>
              <h3>100</h3>
            </div>
          </div>
          <div>
            <span class="statistics-box-left"
                  style="background:#FCEFEF">
              <img src="../../../assets/image/sellerHub/zhifu.png"
                   alt="">
            </span>
            <div class="statistics-box-right">
              <p>买家数（个）</p>
              <h3>5</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fixed-right">
      <div class="fixed-title">
        <div class="headers">
          <span>消息通知（ 6 ）</span>
        </div>
        <p> <img src="../../../assets/image/sellerHub/error.png"
               alt=""> 提示：以下为近期待处理的事宜，请尽快处理避免造成损失</p>
      </div>
      <div class="fixed-box">
        <div class="fixed-box1"
             v-bar>
          <div class="fixed-box2">
            <div class="left-line"></div>
            <a-timeline>
              <a-timeline-item>
                <div class="timeline-box">
                  <span>#找件</span>
                  <div>
                    <p>2021-12-12 12:12</p>
                    <p>有新的平台找件咨询，请及时回复。</p>
                  </div>
                  <div class="timeline-float">处理</div>
                </div>
              </a-timeline-item>
              <a-timeline-item>
                <div class="timeline-box">
                  <span>#找件</span>
                  <div>
                    <p>2021-12-12 12:12</p>
                    <p>有新的平台找件咨询，请及时回复。</p>
                  </div>
                  <div class="timeline-float">处理</div>
                </div>
              </a-timeline-item>
              <a-timeline-item>
                <div class="timeline-box">
                  <span>#找件</span>
                  <div>
                    <p>2021-12-12 12:12</p>
                    <p>有新的平台找件咨询，请及时回复。</p>
                  </div>
                  <div class="timeline-float">处理</div>
                </div>
              </a-timeline-item>
              <a-timeline-item>
                <div class="timeline-box">
                  <span>#找件</span>
                  <div>
                    <p>2021-12-12 12:12</p>
                    <p>有新的平台找件咨询，请及时回复。</p>
                  </div>
                  <div class="timeline-float">处理</div>
                </div>
              </a-timeline-item>
            </a-timeline>
            <div class="fixed-foots">已到底，请尽快处理已有通知</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import moment from "moment"
import { mapGetters } from 'vuex'
export default {
  components: { moment },
  data () {
    return {
      locale,
      //1配件 2财务
      titleIndex: 0,
      // 是否显示配件
      accessories: false,
      // 是否显示财务
      finance: false,
      //年份
      open: false,
      year: '',
      //margin-left 长度
      Left: '',
      //左侧右侧滑动安妮u是否显示 1 显示左侧 2显示右侧 3全显示
      moveClickStatus: 2,
      //数据看板选中项
      statisticsStatus: 1,
      //切换
      cutArry: [],
      monthBillArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    }
  },
  activated () {
    this.initMenu(this.accessoriesAndFinance);
  },
  methods: {
    moment,
    onChange () {

    },
    //切换财务配件
    cutTitle (e) {
      this.titleIndex = e
    },
    openChange (status) {
      if (status) {
        this.open = true;
      } else {
        this.open = false;
      }
    },
    panelChange (value) {
      this.year = value;
      this.open = false;
    },

    //统计数据看板点击时间选择
    clickStatistics (e) {
      this.statisticsStatus = e
    },

    //左右移动 direction true 向左  false 向右
    moveLeft (direction) {
      let elementLength = 216 * 2
      if (direction) {
        this.moveClickStatus = 3
        this.Left = Number(this.Left) + Number(elementLength)
        if (this.Left > 1844) {
          this.Left = 1844
          this.moveClickStatus = 1
        }
        console.log(this.moveClickStatus);
      } else {
        this.moveClickStatus = 3
        this.Left = Number(this.Left) - Number(elementLength)
        if (this.Left <= 50) {
          this.Left = 0
          this.moveClickStatus = 2
        }
      }
    },
    initMenu (newVal) {
      this.titleIndex = 0;
      if (newVal.finance) {
        this.titleIndex = 2;
      }
      if (newVal.accessories) {
        this.titleIndex = 1;
      }
      this.accessories = newVal.accessories;
      this.finance = newVal.finance;
    }
  },
  watch: {
    accessoriesAndFinance (newVal) {
      this.initMenu(newVal);
    }
  },
  computed: {
    ...mapGetters({
      accessoriesAndFinance: 'unSave/sellerMenuAccessoriesAndFinance'
    })
  }
}
</script>
<style lang="less" scoped>
.sellerHubHome {
  .sellerHubHome-box {
    padding: 16px;
    padding-right: 562px;
    .title {
      height: 64px;
      background: #ffffff;
      border-radius: 2px;
      padding: 12px 24px;
      > div {
        min-width: 80px;
        max-width: 160px;
        height: 40px;
        float: left;
        border-radius: 2px;
        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.04);
        padding: 4px;
      }
      span {
        display: inline-block;
        width: 76px;
        text-align: center;
        line-height: 32px;
        font-size: 14px;
        color: @newColorGreyFontM;
        cursor: pointer;
      }
      .active {
        color: @activeRed;
        background: #fcf0f0;
        font-weight: 500;
        font-family: PingFangSC, PingFangSC-Medium;
      }
    }
    .backlog {
      overflow: hidden;
      background: #fff;
      margin: 18px 0;
      border-radius: 2px;
      .backlog-box {
        overflow: hidden;
        padding: 24px 24px 40px;
        > div {
          float: left;
          min-width: 186px;
          width: 16.66%;
          margin-top: 16px;
          .backlog-box-left {
            float: left;
            width: 64px;
            height: 64px;
            background: #fff4e6;
            border-radius: 20px;
            text-align: center;
            line-height: 64px;
            img {
              width: 40px;
              height: 40px;
            }
          }
          .backlog-box-right {
            margin-left: 96px;
            p {
              font-size: 14px;
              color: @newColorGreyFont;
              margin-bottom: 11px;
            }
            span {
              font-size: 14px;
              color: @newColorGreyFont;
              i {
                font-size: 24px;
                font-weight: 500;
                color: @newColorGreyFontM;
                font-style: normal;
                padding-right: 4px;
              }
            }
          }
        }
        > div:nth-child(2) {
          .backlog-box-left {
            background: #fef7f7;
          }
        }
      }
    }
    .bill {
      height: 205px;
      background-color: #fff;
      border-radius: 2px;
      margin: 16px 0;
      .bill-title {
        overflow: hidden;
        > div {
          float: left;
        }
        .title-name {
          color: @colorCommonFont;
          font-size: 16px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          line-height: 32px;
          margin-right: 16px;
        }
      }
      .bill-list {
        position: relative;
        padding: 16px 48px;
        .bill-list-float,
        .bill-list-float-right {
          position: absolute;
          width: 24px;
          height: 118px;
          box-shadow: -4px 0px 6px 0px rgba(0, 0, 0, 0.04);
          right: 24px;
          top: 16px;
          text-align: center;
          line-height: 118px;
          cursor: pointer;
          background: #fff;
          z-index: 60;
        }
        .bill-list-float-right {
          left: 24px;
          box-shadow: 4px 0px 6px 0px rgba(0, 0, 0, 0.04);
        }
        .bill-list-box {
          overflow: hidden;
          .bill-ul {
            width: 2576px;
            overflow: hidden;
            margin-left: 0;
            margin-right: 0;
            transition: all 0.5s;
            .bill-li {
              float: left;
              width: 200px;
              height: 120px;
              margin-right: 16px;
              overflow: hidden;
              .bill-li-title {
                height: 77px;
                border: 1px solid @newBorder;
                border-bottom: 1px dashed @newBorder;
                position: relative;
                font-size: 14px;
                padding: 12px 16px;
                font-family: PingFangSC, PingFangSC-Regular;
                font-weight: 400;
                color: @colorCommonFont;
                > span {
                  font-size: 14px;
                  color: @newColorGreyFont;
                }
                > span:nth-child(2) {
                  float: right;
                  color: @newColorGreyFontM;
                  font-size: 12px;
                  cursor: pointer;
                  height: 20px;
                  line-height: 20px;
                }
                > p {
                  margin-top: 8px;
                  margin-bottom: 0;
                  font-size: 18px;
                  font-weight: 500;
                  color: @newColorGreyFontM;
                }
                > div {
                  width: 10px;
                  height: 10px;
                  border: 1px solid @newBorder;
                  position: absolute;
                  background-color: #fff;
                }
                .circle-left {
                  border-radius: 0 50% 50% 0;
                  left: 0;
                  bottom: 0;
                  transform: translate(-50%, 50%);
                }
                .circle-right {
                  border-radius: 50% 0 0 50%;
                  right: 0;
                  bottom: 0;
                  transform: translate(50%, 50%);
                }
              }
              .bill-li-money {
                border: 1px solid @newBorder;
                border-top: none;
                padding: 12px 16px 0;
                p {
                  font-size: 12px;
                  font-family: PingFangSC, PingFangSC-Regular;
                  font-weight: 400;
                  color: @newColorGreyFont;
                  width: 100%;
                  span {
                    color: @newColorGreyFontM;
                  }
                }
              }
            }
            .bill-li:nth-child(12) {
              margin-right: 0;
            }
          }
        }
      }
    }
    .statistics {
      background: #fff;
      .headers {
        .headers-right {
          margin-top: 10px;
          line-height: 18px;
          font-size: 14px;
          color: @newColorGreyFontM;
          cursor: pointer;
          i {
            border: 1px solid rgba(49, 49, 69, 0.08);
          }
          i:nth-child(1) {
            border-radius: 2px 0px 0px 2px;
          }
          i:nth-child(3) {
            border-radius: 0px 2px 2px 0px;
            margin-right: 8px;
          }
          .active {
            border: 1px solid @activeRed !important;
            color: @activeRed;
            background: #fcefef;
          }
        }
      }
      .statistics-box {
        overflow: hidden;
        padding: 16px 24px;
        > div {
          width: 25%;
          min-width: 279px;
          height: 120px;
          padding: 16px;
          float: left;
          .statistics-box-left {
            float: left;
            width: 26px;
            height: 26px;
            background: #fff3e5;
            border-radius: 50%;
            text-align: center;
            line-height: 26px;
            img {
              width: 13px;
              height: 14px;
            }
          }
          .statistics-box-right {
            margin-left: 34px;
            p {
              font-size: 15px;
              color: @newColorGreyFont;
              margin-bottom: 12px;
            }
            h3 {
              font-weight: 500;
              font-size: 22px;
              color: @newColorGreyFontM;
              height: 30px;
              margin-bottom: 4px;
            }
            span {
              color: @newColorGreyFontM;
              font-size: 12px;
              i {
                font-style: normal;
                color: @activeRed;
              }
            }
          }
        }
      }
      .statistics-box1 {
        overflow: hidden;
        > div {
          height: 98px;
        }
      }
    }
  }
  .fixed-right {
    .fixed-title {
      padding: 16px 24px;
      height: 80px;
      border-bottom: 1px solid @newBorder;
      .headers {
        border-bottom: none;
        height: 22px;
        line-height: 22px;
        padding-left: 0;
        margin-bottom: 9px;
      }
      p {
        font-size: 12px;
        color: @newColorGreyFontM;
        img {
          width: 16px;
          height: 16px;
          margin-left: 12px;
          margin-right: 8px;
        }
      }
    }
    .fixed-box {
      height: 100%;
      padding: 16px 24px 152px;
      overflow: hidden;
      position: relative;

      .fixed-box1 {
        height: 100%;
        background: #fafafa;
        overflow-y: scroll;

        .fixed-box2 {
          padding-left: 16px;
          padding-top: 16px;
          padding-right: 16px;
          position: relative;

          .left-line {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 20.5px;
            z-index: 1;
            width: 2px;
            background: @newBorder;
          }

          /deep/ .ant-timeline {
            position: relative;
            z-index: 10;

            .ant-timeline-item-tail {
              border: none;
            }
          }
          .timeline-box {
            background: #fff;
            padding: 15px 16px;
            border-radius: 2px;
            position: relative;
            span {
              float: left;
              width: 48px;
              font-size: 12px;
              height: 22px;
              background: #f7f8f9;
              color: 12px;
              line-height: 22px;
              text-align: center;
              color: @newColorGreyFont;
            }
            div {
              margin-left: 64px;
              p {
                font-size: 14px;
                color: @newColorGreyFontM;
                margin-bottom: 0;
                margin-right: 52px;
              }
              p:nth-child(1) {
                margin-bottom: 8px;
              }
            }
            .timeline-float {
              width: 52px;
              height: 28px;
              position: absolute;
              right: 16px;
              top: 28px;
              background: #fcefef;
              color: @activeRed;
              font-size: 14px;
              text-align: center;
              line-height: 28px;
              cursor: pointer;
            }
          }
          .fixed-foots {
            margin-top: 8px;
            text-align: center;
            font-size: 12px;
            color: @newColorGreyFont;
            position: 0.8;
          }
        }
      }
    }
  }
  @media screen and (max-width: 2300px) {
    .sellerHubHome-box {
      padding-right: 410px;
    }
    .headers > span {
      font-size: 14px;
    }
    .backlog-box-left {
      width: 56px !important;
      height: 56px !important;
      line-height: 56px !important;
      img {
        width: 32px !important;
        height: 32px !important;
      }
    }
    .backlog-box-right {
      margin-left: 80px !important;
      p {
        font-size: 12px !important;
      }
    }
    span {
      font-size: 12px !important;
      i {
        font-size: 22px !important;
      }
    }
    .statistics-box-right p {
      font-size: 12px !important;
    }
    .fixed-right {
      width: 394px;
      .fixed-title {
        padding: 16px 0;
        p {
          img {
            margin-left: 4px;
            margin-right: 4px;
          }
        }
        .headers {
          margin-bottom: 6px;
          span {
            border-left: 3px solid #d73737;
          }
        }
      }
      .fixed-box {
        padding: 24px;
        .fixed-box1 .fixed-box2 .timeline-box div p {
          font-size: 12px;
          width: 128px;
        }
        .fixed-box1 .fixed-box2 .timeline-box .timeline-float {
          top: 32px;
          font-size: 12px;
        }
      }
    }
  }
}
//公用
.headers {
  height: 54px;
  padding-left: 24px;
  padding-right: 24px;
  line-height: 54px;
  border-bottom: 1px solid @newBorder;
  > span {
    display: inline-block;
    border-left: 4px solid @activeRed;
    padding-left: 8px;
    color: @newColorGreyFontM;
    font-size: 16px;
    height: 12px;
    line-height: 12px;
  }
  .headers-right {
    float: right;
    /deep/ .ant-calendar-picker {
      width: 122px;
    }
    i {
      font-style: normal;
      padding: 6px 12px;
      float: left;
      height: 32px;
    }
  }
}

.fixed-right {
  width: 546px;
  position: fixed;
  height: calc(100%);
  right: 0;
  top: 91px;
  background: #fff;
}
/deep/ .ant-input {
  border: 1px solid @newBorder;
}

/deep/ .ant-timeline-item {
  padding: 0 0 16px;
  .ant-timeline-item-tail {
    top: -16px;
    height: calc(100% + 16px);
  }
  .ant-timeline-item-head {
    top: 24px;
    border: 1px solid @activeRed;
  }
  .ant-timeline-item-tail {
    border-left: 2px solid #ededed;
  }
  .ant-timeline-item-content {
    margin: 0 0 0 26px;
  }
}
/deep/ .ant-timeline-item-last > .ant-timeline-item-tail {
  display: block;
  height: calc(100% + 100px);
}
// .ant-timeline-item-last::after {
//   position: absolute;

//   content: "";
//   height: 1000px;
//   width: 1px;
//   background: #000;
// }
/deep/ .ant-input::-webkit-input-placeholder {
  /* WebKit browsers */
  font-size: 14px;
}
/deep/ .ant-input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  font-size: 14px;
}
/deep/ .ant-input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  font-size: 14px;
}
/deep/ .ant-input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  font-size: 14px;
}
</style>
